<style lang="less">
  .sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: auto;
    .el-menu--collapse {
      .el-submenu__icon-arrow {
        display: none;
      }
      .el-submenu__title span {
        display: none;
      }
    }
    &::-webkit-scrollbar {
      width: 0;
    }
    .el-menu:not(.el-menu--collapse) {
      width: 250px;
    }
  }
</style>
<template>
  <div class="sidebar">
    <el-menu
      :default-active="activeMenu" :collapse="collapse" background-color="#eaedf1"
      text-color="#666" active-text-color="#f73b42" :unique-opened="true"
      router
    >
      <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
    </el-menu>
  </div>
</template>
<script>
import bus from '@/bus'
import SidebarItem from './SidebarItem'
export default {
  components: {
    SidebarItem
  },
  data() {
    return {
      collapse: false
    }
  },
  computed: {
    activeMenu() {
      console.log('activeMenu=>', this.$route.path)
      return this.$route.path
    },
    routes() {
      const rootRoute = this.$route.matched[0].path || '/'
      const children = this.$router.options.routes.filter(item => item.path === rootRoute)
      return children.filter(item => !item.meta.hidden)
    }
  },
  created() {
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    bus.$on('collapse', msg => {
      this.collapse = msg
      bus.$emit('collapse-content', msg)
    })
  }
}
</script>

